﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Tmpl.aspx.cs" MasterPageFile="~/Site.Master"
    Inherits="ASPNETPerformance._08_AjaxAndJson.Tmpl" %>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <h2>
        Jquery Templates Plugin</h2>
    <p>
        <b>服务器回传:选择一个分类:</b>
        <asp:DropDownList runat="server" ID="drpCategories" AppendDataBoundItems="true" DataSourceID="dsProducts"
            AutoPostBack="true" DataTextField="CategoryName" DataValueField="CategoryID"
            OnSelectedIndexChanged="DrpCategories_SelectedIndexChanged">
            <asp:ListItem Text="-- 选择一个分类 --" Value="-1" />
        </asp:DropDownList>
        <asp:SqlDataSource ID="dsProducts" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            SelectCommand="SELECT Products.ProductName, Categories.CategoryName,Categories.CategoryID, Suppliers.CompanyName, Products.QuantityPerUnit, Products.UnitPrice, Products.Discontinued FROM Products INNER JOIN Categories ON Products.CategoryID = Categories.CategoryID INNER JOIN Suppliers ON Products.SupplierID = Suppliers.SupplierID ORDER BY Products.ProductName">
        </asp:SqlDataSource>
    </p>
    <div>
        <asp:Repeater runat="server" ID="rptProducts">
            <ItemTemplate>
                <div class="product">
                    <h3>
                        <%# Eval( "ProductName" )%></h3>
                    <div class="details">
                        <b>Qty/Unit:</b><%# Eval( "QuantityPerUnit" )%>.<br>
                        <b>Price:</b>
                        <%# Eval( "UnitPrice", "{0:F}" )%><br>
                        <b>Discontinued:</b>
                        <%# Eval( "Discontinued" ) %>
                    </div>
                </div>
            </ItemTemplate>
        </asp:Repeater>

        
    </div>
    <p>
        <b>客户端Ajax：选择一个分类:</b>
        <select id="categories">
            <option value="-1">-- 选择一个分类 --</option>
        </select>
    </p>
    <div id="products">
    </div>
    <script id="solutionsTemplate" type="text/html">
        <div class="product">
            <h3>
                  ${ProductName}</h3>
            <div class="details">
                <b>Qty/Unit:</b> ${QuantityPerUnit}.<br>
                <b>Price:</b> ${UnitPrice.toFixed(2)}<br>
                <b>Discontinued:</b> ${Discontinued}
            </div>
        </div>    
    </script>


    <script type="text/javascript">
        $(document).ready(function () {
            // Populate the categories DDL
            $.getJSON('<%=Page.ResolveUrl("~/Services/NorthwindService.ashx/GetCategories")%>',
                      function (data) {
                          $.each(data, function (index, elem) {
                              // Create a new <option>, set its text and value, and append it to the <select>
                              $("<option />")
                                .text(elem.CategoryName)
                                .val(elem.CategoryID)
                                .appendTo("#categories");
                          });
                      }
            );

            // Create a change event handler for categories
            $("#categories").change(ShowProductsInCategory);
        });

        function ShowProductsInCategory() {
            // Determine the CategoryID of the selected category
            var categoryId = $("#categories").val();

            // If the --Select Category-- option is selected, hide the product display
            if (categoryId == -1)
                $("#products").hide();
            else {
                // Get the category products and display them!
                $.getJSON('<%=Page.ResolveUrl("~/Services/NorthwindService.ashx/GetProductsByCategory")%>/' + categoryId,
                     DisplayResults // 安全返回
                );
            }
        }

        function DisplayResults(results) {
            if (results.length > 0)
                $("#products").html("共有 <b>" + results.length + "</b>条数据");
            else
                $("#products").html("<p>没有数据!</p>");

            // Render the template and display in products            
            // $("#solutionsTemplate").tmpl(results).appendTo("#products");
           // tmpl(); Jquery.tmpl()

            $.template("movieTemplate", $("#solutionsTemplate"));

            $.tmpl("<li></li>", results).appendTo("#products");
        }
    </script>
</asp:Content>
